/** IT网络流量部件 
 * Author:      yangjq 
 * CreateTime:  2023/9/6 10:17:38 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:35:09 
 * Description: 
*/ 
<template>
  <div ref="echartRef" style="height:100%;width:100%"></div>
</template>
<script setup lang="ts">
  import { ref, Ref, reactive, watchEffect, onMounted,onUnmounted, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import {defHttp} from "/@/utils/http/axios";

  const props = defineProps(['width', 'height']);

  const echartRef = ref<HTMLDivElement | null>(null);

  const { setOptions, echarts, getInstance } = useECharts(echartRef as Ref<HTMLDivElement>, 'dark');

  // prettier-ignore
  const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];

  const data2 = [
    ['2000-06-05', 1260],
    ['2000-06-06', 123],
    ['2000-06-07', 145],
    ['2000-06-08', 286],
    ['2000-06-09', 173],
    ['2000-06-10', 535],
    ['2000-06-11', 273],
    ['2000-06-12', 268],
    ['2000-06-13', 192],
    ['2000-06-14', 230],
    ['2000-06-15', 245],
    ['2000-06-16', 239],
    ['2000-06-17', 315],
    ['2000-06-18', 111],
    ['2000-06-19', 309],
    ['2000-06-20', 206],
    ['2000-06-21', 237],
    ['2000-06-22', 118],
    ['2000-06-23', 185],
    ['2000-06-24', 194],
    ['2000-06-25', 171],
    ['2000-06-26', 126],
    ['2000-06-27', 184],
    ['2000-06-28', 193],
    ['2000-06-29', 4572.89],
    ['2000-06-30', 173],
    ['2000-07-01', 183],
    ['2000-07-02', 135],
    ['2000-07-03', 117],
    ['2000-07-04', 182],
    ['2000-07-05', 144],
    ['2000-07-06', 172],
    ['2000-07-07', 126],
    ['2000-07-08', 67],
    ['2000-07-09', 6542.8],
    ['2000-07-10', 191],
    ['2000-07-11', 192],
    ['2000-07-12', 123],
    ['2000-07-13', 37],
    ['2000-07-14', 131],
    ['2000-07-15', 4578],
    ['2000-07-16', 164],
    ['2000-07-17', 169],
    ['2000-07-18', 188],
    ['2000-07-19', 717],
    ['2000-07-20', 183],
    ['2000-07-21', 221],
    ['2000-07-22', 127],
    ['2000-07-23', 155],
    ['2000-07-24', 8250],
  ];
  const dateList = ref(data.map(function (item) {
    return item[0];
  }));
  const dateList2 = data.map(function (item) {
    return item[0];
  });
  const twoTop = ref(data.map(function (item) {
    return item[1];
  }));
  const twoDown = ref(data2.map(function (item) {
    return item[1];
  }));
  const oneTop = ref(data.map(function (item) {
    return item[1];
  }));
  const oneDown = ref(data2.map(function (item) {
    return item[1];
  }));

  const option = reactive({});
  function initCharts() {
    Object.assign(
      option,
      reactive({
        // Make gradient line here        
        title: [
          {
            left: 'center',
            top: '4%',
            text: '流量监测',
          },
        ],
        tooltip: {
          trigger: 'axis',
        },
        //backgroundColor: 'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
        // animationEasing: 'elasticOut',
        // animationDelayUpdate: function (idx) {
        //   return idx * 10;
        // },
        xAxis: [
          {
            data: dateList,
            gridIndex: 0,
            axisLabel: {
              textStyle: {
                color: '#fffff', //x轴文本颜色
                fontSize: 10,
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '流速(Mbps)',
            nameLocation: 'center',
            nameGap: 54,
            nameRotate: 90,
            nameTextStyle :{
              fontWeight: 700,
              fontSize: 12,
              color: '#ffffff'
            },
            axisLabel: {
              textStyle: {
                color: '#ffffff',
              },
            },
            splitLine: { show: false },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0)', 'rgba(200,200,200,0.1)'],
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            gridIndex: 0,
          },
        ],
        grid: { top: 'center', left: 'center',width:'85%', height: '55%',containLabel:true },
        legend: {
          show: true,
          type: 'plain',
          bottom: '4%',
          //, '总院楼层交换机上联口(上行)' , '总院楼层交换机上联口(下行)'
          data: ['总院科研交换机上联口(上行)', '总院科研交换机上联口(下行)' ],
          textStyle: {
            fontWeight: 700,
            fontSize: 12,
            color: '#ffffff'
          },
        },
        series: [
          {
            type: 'line',
            name: '总院科研交换机上联口(上行)',
            showSymbol: false,
            data: twoTop,
            color: '#5470c6',
            xAxisIndex: 0,
            yAxisIndex: 0,
          },
          {
            type: 'line',
            name: '总院科研交换机上联口(下行)',
            showSymbol: false,
            data: twoDown,
            color: '#fac858',
            xAxisIndex: 0,
            yAxisIndex: 0,
          },
          // {
          //   type: 'line',
          //   name: '总院楼层交换机上联口(上行)',
          //   showSymbol: false,
          //   data: oneTop,
          //   color: '#ff1e10',
          //   xAxisIndex: 0,
          //   yAxisIndex: 0,
          // },
          // {
          //   type: 'line',
          //   name: '总院楼层交换机上联口(下行)',
          //   showSymbol: false,
          //   data: oneDown,
          //   color: '#5790a7',
          //   xAxisIndex: 0,
          //   yAxisIndex: 0,
          // },
        ],
      })
    );
    setOptions(option);
  }

  function loadData(){
    let api = "/screen/it/flowList";
    let params = {};
    let options = {isTransformResponse: false};
    defHttp.get({url: api, params}, options)
      .then((res) => {
        if (res.success) {
          console.log(res);
          dateList.value = res.result.dateList
          // oneTop.value = res.result.oneTop
          // oneDown.value = res.result.oneDown
          twoTop.value = res.result.twoTop
          twoDown.value = res.result.twoDown
          initCharts();
        } else {
          console.log('接口错误用默认');
        }
      })
  }


  let timer;
  onMounted(() => {
    loadData();
    timer = setInterval(() => {
      loadData();
    }, 120000); // 根据需要调整滚动间隔
  });

  onUnmounted(()=>{
    if(timer){
      clearInterval(timer);
    }
  });
</script>
<style></style>
